<!--
  Generated template for the FinishModalPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar color="secondary">
    <ion-title *ngIf="mode_step === 'clean'"><span class="custom-font-size-t">Finalizar producción</span></ion-title>
    <ion-title *ngIf="mode_step !== 'clean'"><span class="custom-font-size-t">Empezar producción</span></ion-title>
    <ion-buttons end>
        <button ion-button (click)="closeModal()">
            <span class="custom-font-size-t">Atrás</span>
        </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content padding>
    <button  *ngIf="(mode !== 'show') && (mode_step === 'start')" ion-button full color= "secondary"(click)="showLots()">
        Ver lotes
    </button>
    <ion-list>
        <ion-item *ngIf="(mode !== 'show') && (mode_step === 'clean')">
            <ion-label color="primary" stacked><span>Cantidad en {{this.prodData.uos}}</span></ion-label>
            <ion-input type="number" [(ngModel)]="uos_qty" name='uos_qty' (ionChange)='onchange_uos()' placeholder="Cant. segunda unidad"></ion-input>
            <button ion-button outline large item-right color="dark" (click)="open_calculator()">
                <ion-icon name="calculator" ></ion-icon>
            </button>
        </ion-item>

        <ion-item *ngIf="(mode !== 'show') && (mode_step === 'clean')">
            <ion-label color="primary" stacked><span>Cantidad en {{this.prodData.uom}}</span></ion-label>
            <ion-input type="number" [(ngModel)]="qty" name='qty' (ionChange)='onchange_uom()' placeholder="Introducir cantidad"></ion-input>
        </ion-item>

        <ion-item *ngIf="(mode !== 'show') && (mode_step === 'clean')">
            <ion-label>Permitir cantidad cero</ion-label>
            <ion-toggle [(ngModel)]="allow_zero"></ion-toggle>
        </ion-item>

        <ion-item *ngIf="(mode !== 'show') && (mode_step === 'start')">
            <ion-label color="primary" stacked><span>Lote</span></ion-label>
            <ion-input type="text" [(ngModel)]="lot" name='lot' placeholder="Introducir lote"></ion-input>
            <button ion-button outline large item-right color="dark" (click)="get_default_lot_name()">
                <ion-icon name="color-wand" ></ion-icon>
            </button>
        </ion-item>

        <ion-item *ngIf="(mode !== 'show') && (mode_step === 'start')">
            <ion-label color="primary" stacked><span>Fecha de caducidad</span></ion-label>
            <ion-datetime displayFormat="MM/YYYY" pickerFormat="MM YYYY" max="2099-12-31" placeholder="Introducir caducidad" [(ngModel)]="date"></ion-datetime>
        </ion-item>
    </ion-list>

    <ion-searchbar *ngIf="mode == 'show'" (ionInput)="getItems($event)"></ion-searchbar>
    <ion-list *ngIf="mode === 'show'"> 
        <button ion-item *ngFor="let lot of items" (click)="lotSelected(lot)">
            {{ lot.name }}
        </button>  
    </ion-list> 

    <button *ngIf="mode !== 'show'" ion-button full (click)="confirm()">
        Confirmar
    </button>

</ion-content>
